<!-- 审减退库查询 -->
<template>
    <el-container class="electronicSignature">
        <el-main class="mainDetails">
            <SearchPanel title="查询条件">
                <div ref="queryFormBox" class="search-flex-box">
                    <MyForm ref="formRef" v-model="queryParams" :form-option="formOption" :select-list="dicLists">
                        <template #orgId>
                            <el-input v-model="treeParams.orgName" placeholder="请点击选择" @click.native="checkTreeOrgId"
                                class="readonly-style"></el-input>
                        </template>
                    </MyForm>
                    <div class="searchBtn">
                        <el-button type="primary" class="pms-button-primary" @click="doSearch">查 询</el-button>
                        <el-button type="primary" class="pms-button-primary" @click="reset">重 置</el-button>
                    </div>
                </div>
            </SearchPanel>
            <SearchPanel style="margin-top: 30px;" title="查询结果">
                <el-table :data="tableData" style="width: 100%" border>
                    <el-table-column type="index" label="序号" width="50" align="center" />
                    <el-table-column v-for="item in configColumns" :key="item.prop" :label="item.label"
                        show-overflow-tooltip :prop="item.prop" align="center" >
                        <template slot-scope="scope">
                            <span @click="skipInfo(scope.row, item)" class="header-tooltip"
                                :style="{ color: item.prop === 'projectName' ? 'rgb(51, 170, 255)' : '#333', cursor: item.prop === 'projectName' ? 'pointer' : '' }">
                                {{ getTableNameDiclist(scope.row, item) }}
                            </span>
                        </template>
                    </el-table-column>
                    <!-- 操作 -->
                    <!-- <el-table-column label="操作" width="180" align="center">
                        <template slot-scope="scope">
                            <div class="btn-list">
                                <span type="primary" v-if="!scope.row.procInstanceId"
                                    @click="retreatResate(scope.row)">退库申请</span>
                            </div>
                        </template>
                    </el-table-column> -->
                </el-table>
                <pagination v-if="pageParam.total > 10" :total="pageParam.total" :page.sync="pageParam.pageNum"
                    :limit.sync="pageParam.pageSize" @pagination="doSearch" />
            </SearchPanel>
            <el-dialog title="请选择建设单位" :visible.sync="showDialog" class="pms-zr-dialog" width="25%">
                <div style="max-height: 300px;overflow-y: auto">
                    <el-input placeholder="输入关键字进行过滤" v-model="filterText" class="pms-input">
                    </el-input>
                    <div style="padding: 10px 0px;">
                        <el-tree class="filter-tree" :data="treeData" :props="defaultProps" default-expand-all
                            :filter-node-method="filterNode" ref="tree" :highlight-current="true"
                            :expand-on-click-node="false" show-checkbox @check="handleNodeClick">
                        </el-tree>
                    </div>
                    <div slot="footer" class="dialog-footer" style="width: 100%;text-align: center;margin-top: 20px;position: sticky;bottom: -1px;background: white; z-index: 2000;padding: 10px;">
                        <el-button class="pms-zr-button-primary" @click="confirmSave">确 定</el-button>
                        <el-button class="pms-zr-button-primary" @click="showDialog = false">取 消</el-button>
                    </div>
                </div>
            </el-dialog>
        </el-main>
    </el-container>
</template>

<script>
import { configColumns, formOption } from "../configOption"
import SearchPanel from '@/components/basic/SearchPanel'
import MyForm from '@/components/basic/myForm'
import SysConst from '@/common/const'
import { getDropdownData } from '@/api/common/index'
import { getSearchList, getSearchCount, getConfigAcquisitionTreeList } from "@/api/declinebank/index"
export default {
    name: "SearchInfo",
    components: {
        SearchPanel,
        MyForm
    },
    watch: {
        filterText: {
            handler(val) {
                this.$refs.tree.filter(val);
            }
        },
    },
    data() {
        return {
            queryParams: {
            },
            dicLists: {
            },
            formOption,
            configColumns,
            tableData: [],
            pageParam: {
                pageSize: SysConst.PAGESIZE, // 每页显示val条
                pageNum: SysConst.CURRENT_PAGE, // 当前页
                total: SysConst.TOTAL // 总数
            },
            showDialog: false,
            filterText: "",
            treeData: [],
            defaultProps: {
                children: "children",
                label: "label",
            },
            treeParams: {
                orgId: "",
                orgName: ''
            },
            saveObj: {},
        }
    },
    created() {
        this.getDictData()
    },
    methods: {
        getTableNameDiclist(row, item) {
            console.log(this.dicLists)
            let value = row[item.prop]
            if (this.dicLists[item.dicType]) {
                this.dicLists[item.dicType].forEach(items => {
                    if (items.dictId === value) {
                        value = items.dictName
                    }
                })
            }
            return value
        },
        // 查看详情
        skipInfo(row, item) {
            if (item.prop === 'projectName') {
                window.open(`${process.env.VUE_APP_ZHONGRUAN_URL}handleDeclineBank?prjId=${row.prjId}&bizseq=${row.id}&processInstId=${row.procInstanceId}&type=1`, '_blank')
            }
        },
        // 退库申请
        retreatResate(row) {
            window.open(`${process.env.VUE_APP_ZHONGRUAN_URL}handleDeclineBank?prjId=${row.prjId}&bizseq=${row.id}&processInstId=${row.procInstanceId}&type=1&status=todo`, '_blank')
        },
        reset() {
            this.$refs.formRef.reset()
            this.saveObj = {}
            this.treeParams.orgId = ''
            this.treeParams.orgName = ''
            this.getTreeList()
        },
        async doSearch(item) {
            const params = {
                pageNum: item?.page || SysConst.CURRENT_PAGE,
                pageSize: item?.limit || SysConst.PAGESIZE,
                param: {
                    ...this.queryParams,
                    orgId: this.treeParams.orgId,
                    orgName: this.treeParams.orgName
                }
            }
            const { code, data } = await getSearchList(params)
            if (+code === 200) {
                this.tableData = data
                const result = await getSearchCount(params)
                this.pageParam.total = result.data
            }
        },
        async getDictData() {
            const arr = ['PROJ_TYPE', 'IS_NEWBUSINESS', 'PRJ_YEAR', 'BUILD_MODES', 'REDUCE_CANCELLSTOCKS_STATUS']
            const promises = arr.map(item => getDropdownData(item))
            const results = await Promise.all(promises)
            arr.forEach((item, i) => {
                this.$set(this.dicLists, item, results[i].data ?? [])
            })
            await this.getTreeList()
        },
        async getTreeList() {
            const { code, data } = await getConfigAcquisitionTreeList({})
            if (+code === 200) {
                this.treeData = data
                if (this.treeData?.length > 0) {
                    this.expandedKeys?.push(this.treeData[0].id);
                }
            }
        },
        async checkTreeOrgId() {
            this.filterText = ""
            this.showDialog = true
        },
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        handleNodeClick(preCurrent, current) {
            const { checkedNodes } = current
            const result = {
                id: checkedNodes?.map(item => item.id).join(','),
                label: checkedNodes?.map(name => name.label).join(',')
            }
            this.saveObj = result
        },
        confirmSave() {
            this.treeParams.orgId = this.saveObj.id
            this.treeParams.orgName = this.saveObj.label
            this.showDialog = false
        },
    }
}
</script>
<style lang="scss" scoped>
.electronicSignature {
    width: 100%;
    padding: 20px;

    .mainDetails {
        padding: 0 25px;

        .search-flex-box {
            height: auto;

            .searchBtn {
                width: 100px;
                margin-left: auto;
                display: flex;
                margin-top: 4px;
                flex-direction: column;

                .el-button+.el-button {
                    margin-left: 0;
                    margin-top: 8px;
                }
            }
        }
    }

}

// 滚动条样式
::v-deep .el-dialog__body::-webkit-scrollbar {
    width: 6px;
    height: 10px;
}

::v-deep .el-dialog__body::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #f2f3f5;
}

::v-deep .el-range-editor.el-input__inner {
    padding: 0 4px !important;
}

.header-tooltip {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

.btn-list {
    display: flex;
    justify-content: space-around;
    cursor: pointer;
    color: rgb(51, 170, 255)
}

/* 模拟禁用状态样式 */
.readonly-style .el-input__inner {
    background-color: #f5f7fa;
    cursor: pointer;
    /* 提示可点击 */
    color: #666;
}
</style>
<style>
.el-select-dropdown__item {
    width: 100%;
}
</style>